import uuidv1 from "uuid/v1";
import * as echarts from "echarts/dist/echarts";

let zz = {
  watch: {},
  methods: {
    markcz(each_point) {
      // let options = {};

      // this.markquancz(each_point);
      // this.markyuancz(each_point);
      // this.markzhucz(each_point);
      if (!each_point["marklabel"]) {
        this.marklabelcz(each_point);
      }
    },

    createcpChartStatic(p, position, size) {

      var container = document.createElement("div");
      container.style.width = "512px";
      container.style.height = "512px";

      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(container, "dark");
      let option = {
        backgroundColor: "rgba(0, 255, 100, 0.0)",
        xAxis: {
          type: "category",
          boundaryGap: false
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "30%"]
        },
        visualMap: {
          type: "piecewise",
          show: false,
          dimension: 0,
          seriesIndex: 0,
          pieces: [
            {
              gt: 1,
              lt: 3,
              color: "rgba(0, 180, 0, 0.5)"
            },
            {
              gt: 5,
              lt: 7,
              color: "rgba(0, 180, 0, 0.5)"
            }
          ]
        },
        series: [
          {
            type: "line",
            smooth: 0.6,
            symbol: "none",
            lineStyle: {
              color: "green",
              width: 5
            },
            markLine: {
              symbol: ["none", "none"],
              label: { show: false },
              data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }]
            },
            areaStyle: {},
            data: [
              ["2019-10-10", 200],
              ["2019-10-11", 400],
              ["2019-10-12", 650],
              ["2019-10-13", 500],
              ["2019-10-14", 250],
              ["2019-10-15", 300],
              ["2019-10-16", 450],
              ["2019-10-17", 300],
              ["2019-10-18", 100]
            ]
          }
        ]
      };
      myChart.setOption(option);

      myChart.on("finished", function() {
        p.imageUrl = myChart.getDataURL();
      });

      return p;
    },

    createGroundChartStatic(earth, position, size) {
      var p = new XE.Obj.CustomGroundRectangle(earth);
      p.position = position;
      p.width = size[0];
      p.height = size[1];
      p.canvasWidth = 512;
      p.canvasHeight = 512;
      // p.color = [0.5, 0.8, 1, 2];

      var container = document.createElement("div");
      container.style.width = "512px";
      container.style.height = "512px";

      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(container, "dark");
      let option = {
        backgroundColor: "rgba(0, 255, 100, 0.0)",
        xAxis: {
          type: "category",
          boundaryGap: false
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "30%"]
        },
        visualMap: {
          type: "piecewise",
          show: false,
          dimension: 0,
          seriesIndex: 0,
          pieces: [
            {
              gt: 1,
              lt: 3,
              color: "rgba(0, 180, 0, 0.5)"
            },
            {
              gt: 5,
              lt: 7,
              color: "rgba(0, 180, 0, 0.5)"
            }
          ]
        },
        series: [
          {
            type: "line",
            smooth: 0.6,
            symbol: "none",
            lineStyle: {
              color: "green",
              width: 5
            },
            markLine: {
              symbol: ["none", "none"],
              label: { show: false },
              data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }]
            },
            areaStyle: {},
            data: [
              ["2019-10-10", 200],
              ["2019-10-11", 400],
              ["2019-10-12", 650],
              ["2019-10-13", 500],
              ["2019-10-14", 250],
              ["2019-10-15", 300],
              ["2019-10-16", 450],
              ["2019-10-17", 300],
              ["2019-10-18", 100]
            ]
          }
        ]
      };
      myChart.setOption(option);

      myChart.on("finished", function() {
        p.imageUrl = myChart.getDataURL();
      });

      return p;
    },

    createGroundChart(earth, position, size) {
      var p = new XE.Obj.CustomGroundRectangle(earth);
      p.position = position;
      p.width = size[0];
      p.height = size[1];
      p.canvasWidth = 512;
      p.canvasHeight = 512;
      // p.color = [0.5, 0.8, 1, 2];

      var container = document.createElement("div");
      container.style.width = "512px";
      container.style.height = "512px";

      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(container);
      option = {
        backgroundColor: "rgba(0, 255, 100, 0.5)",
        xAxis: {
          type: "category",
          boundaryGap: false
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "30%"]
        },
        visualMap: {
          type: "piecewise",
          show: false,
          dimension: 0,
          seriesIndex: 0,
          pieces: [
            {
              gt: 1,
              lt: 3,
              color: "rgba(0, 180, 0, 0.5)"
            },
            {
              gt: 5,
              lt: 7,
              color: "rgba(0, 180, 0, 0.5)"
            }
          ]
        },
        series: [
          {
            type: "line",
            smooth: 0.6,
            symbol: "none",
            lineStyle: {
              color: "green",
              width: 5
            },
            markLine: {
              symbol: ["none", "none"],
              label: { show: false },
              data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }]
            },
            areaStyle: {},
            data: [
              ["2019-10-10", 200],
              ["2019-10-11", 400],
              ["2019-10-12", 650],
              ["2019-10-13", 500],
              ["2019-10-14", 250],
              ["2019-10-15", 300],
              ["2019-10-16", 450],
              ["2019-10-17", 300],
              ["2019-10-18", 100]
            ]
          }
        ]
      };
      // myChart.setOption(option);

      function randomData() {
        now = new Date(+now + oneDay);
        value = value + Math.random() * 21 - 10;
        return {
          name: now.toString(),
          value: [
            [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/"),
            Math.round(value)
          ]
        };
      }

      var data = [];
      var now = +new Date(1997, 9, 3);
      var oneDay = 24 * 3600 * 1000;
      var value = Math.random() * 1000;
      for (var i = 0; i < 1000; i++) {
        data.push(randomData());
      }

      var option = {
        backgroundColor: "rgba(255, 255, 255, 0.5)",
        title: {
          text: "动态数据 + 时间坐标轴"
        },
        tooltip: {
          trigger: "axis",
          formatter: function(params) {
            params = params[0];
            var date = new Date(params.name);
            return (
              date.getDate() +
              "/" +
              (date.getMonth() + 1) +
              "/" +
              date.getFullYear() +
              " : " +
              params.value[1]
            );
          },
          axisPointer: {
            animation: false
          }
        },
        xAxis: {
          type: "time",
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "100%"],
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: "模拟数据",
            type: "line",
            showSymbol: false,
            hoverAnimation: false,
            data: data
          }
        ]
      };

      myChart.setOption(option);

      setInterval(function() {
        for (var i = 0; i < 5; i++) {
          data.shift();
          data.push(randomData());
        }

        myChart.setOption({
          series: [
            {
              data: data
            }
          ]
        });
      }, 1000);

      myChart.on("rendered", function() {
        p.imageUrl = myChart.getDataURL();
      });

      return p;
    },

    marklabelcz(each_point) {
      // let label = {
      //   czmObject: {
      //     xbsjType: "GeoPin",
      //     xbsjGuid: "c6be2dc8-d226-48c7-8b6e-1263691a71ed",
      //     name: "div图标",
      //     position: each_point.position,
      //     far: 1073741824,
      //     innerHTML: `<div
      //         style="height:114px;width:474px;left:-240px;
      //         bottom:-24px;position: absolute;color: white;
      //         background-size: 100% 100%;padding: 5px;
      //         border-radius: 5px;cursor:pointer;
      //         background-image:url('./assets/dialog.png');">
      //     <div style="cursor:pointer;position: absolute; line-height:15px;top: 16px; bottom: 0px; left: 16px; color: white;"><span style="font-size: 14px;color:#ffffff">玲珑智慧综合能源系统</span><br><span style="font-size: 12px;color:#ffffff;opacity:0.6">CPU： 50%<br/>内存：80%<br/>硬盘： 50%</span></div>
      //     </div>`
      //   }
      // };
      // this._earth.sceneTree.root.children.push(label);

      let pinid = uuidv1();

      this[pinid] = new XE.Obj.Plots.GeoPin(this._earth);

      this[pinid].innerHTML =
        `
        <!DOCTYPE HTML>
        <html>

        <head>
            <title></title>
            <style>
                .contain {
                    position: absolute;
                    height: 235px;
                    width: 586px;
                    left: 2px;
                    top: -242px;
                    color: white;
                    background-size: 100% 100%;
                    padding: 5px;
                    border-radius: 5px;
                    cursor: pointer;
                    background-image: url('/configuration/ziyuan/dialog.png');
                }
                .textContain {
                    position: absolute;
                    cursor: pointer;
                    line-height: 15px;
                    top: 20px;
                    bottom: 0px;
                    left: 190px;
                    color: white;
                    padding: 22px;
                }
                .textItem {
                    display: block;
                    font-size: 14px;
                    color: #ffffff;
                    line-height: 22px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 7;
                    -webkit-box-orient: vertical;
                }
                @keyframes scale {
                    0% {
                        transform: scale(1)
                    }
                    50%,
                    75% {
                        transform: scale(3)
                    }
                    78%,
                    100% {
                        opacity: 0
                    }
                }
                @keyframes scales {
                    0% {
                        transform: scale(1)
                    }
                    50%,
                    75% {
                        transform: scale(2)
                    }
                    78%,
                    100% {
                        opacity: 0
                    }
                }
                .smallcircle {
                    position: absolute;
                    width: 12px;
                    height: 12px;
                    background-color: #56bcd6;
                    opacity: 0.8;
                    border-radius: 50%;
                    top: -4px;
                    left: -6px;
                }
                .smallcircle:before {
                    content: '';
                    display: block;
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;
                    opacity: .4;
                    background-color: #56bcd6;
                    opacity: 0.8;
                    animation: scale 1s infinite cubic-bezier(0, 0, .49, 1.02);
                }
                .bigcircle {
                    position: absolute;
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;
                    opacity: .4;
                    background-color: #56bcd6;
                    opacity: 0.8;
                    animation: scales 1s infinite cubic-bezier(0, 0, .49, 1.02);
                    top: -4px;
                    left: -6px;
                }
            </style>
        </head>
        <body>
            <div class="contain">
                <div style="position: absolute; top: 7px; left: 202px;"><span style="font-size: 16px; color: #ffe799;">热源详情</span>
                <span style="display: inline-block; width: 14px; height: 12px; background: url(/configuration/ziyuan/arrow.png) no-repeat; background-size: 100% 100%; margin-left: 6px;"></span></div>
                <div class="textContain"><span class="textItem">` +
        `
        <span style="font-size: 14px;color:#ffffff">${each_point.name}热源</span><br>
        <span style="font-size: 12px;color:#ffffff;opacity:0.6">
          供热量： 500MW<br/>
          面  积： 200亩<br/>
          员 工： 200人<br/>
          产 值： 20亿<br/>
          燃煤： 50吨
        </span>
      ` +
        `</span></div>
            </div>
            <div class="smallcircle"></div>
            <div class="bigcircle"></div>
        </body>
        </html>
      `;

      this[pinid].position = [
        each_point.position[0],
        each_point.position[1],
        10
      ];
      // 监控数据
      this[uuidv1()] = XE.MVVM.watch(this._earth.camera, "position", () => {
        // xepd: xepositionDistance的缩写
        // this._pinDivTool.position.xepd(earth.camera.position): 计算相机和pin之间的距离
        const d = this[pinid].position.xepd(this._earth.camera.position);
        if (d > 500) {
          this[pinid].enabled = false;
        } else {
          this[pinid].enabled = true;
        }
      });
    },

    marklabel(each_point) {
      let label = {
        czmObject: {
          xbsjType: "GeoPin",
          xbsjGuid: "c6be2dc8-d226-48c7-8b6e-1263691a71ed",
          name: "div图标",
          position: each_point.position,
          far: 1073741824,
          innerHTML: `
          <div
              style="height:114px;width:474px;left:-240px;
              bottom:-24px;position: absolute;color: white;
              background-size: 100% 100%;padding: 5px;
              border-radius: 5px;cursor:pointer;
              background-image:url('./assets/dialog.png');">

            <div style="cursor:pointer;position: absolute; line-height:15px;top: 16px; bottom: 0px; left: 16px; color: white;">
              <span style="font-size: 14px;color:#ffffff">玲珑智慧综合能源系统</span><br>
              <span style="font-size: 12px;color:#ffffff;opacity:0.6">
                CPU： 50%<br/>
                内存：80%<br/>
                硬盘： 50%
              </span>
            </div>

          </div>`
        }
      };
      this._earth.sceneTree.root.children.push(label);
    },
    markyuancz(options) {
      let yuan = {
        czmObject: {
          xbsjType: "CustomPrimitive",
          xbsjGuid: uuidv1(),
          name: "yuan",
          evalString: `
                    p.canvasWidth = 512;
                    p.canvasHeight = 512;
                    p.drawCanvas(ctx => {
                        var gradient = ctx.createRadialGradient(256, 256, 0, 256, 256, 256);
                        gradient.addColorStop(0.1, "rgba(255, 255, 255, 1.0)");
                        gradient.addColorStop(0.2, "rgba(255, 255, 255, 0.0)");
                        gradient.addColorStop(0.3, "rgba(255, 255, 255, 0.9)");
                        gradient.addColorStop(0.5, "rgba(255, 255, 255, 0.0)");
                        gradient.addColorStop(0.9, "rgba(255, 255, 255, 0.2)");
                        gradient.addColorStop(1.0, "rgba(255, 255, 255, 1.0)");

                        ctx.clearRect(0, 0, 512, 512);
                        ctx.beginPath();
                        ctx.arc(256, 256, 256, 0, Math.PI * 2, true);
                        // ctx.fillStyle = "rgb(0, 155, 255)";
                        ctx.fillStyle = gradient;
                        ctx.fill();
                        ctx.restore();
                    });
                `,
          position: options.position,
          scale: [25 * options.scale, 25 * options.scale, 0.05 * options.scale],
          positions: [-1, -1, 0, 1, -1, 0, 1, 1, 0, -1, 1, 0],
          sts: [0, 0, 1, 0, 1, 1, 0, 1],
          indices: [0, 1, 2, 0, 2, 3],
          renderState: {
            cull: {
              enabled: true
            },
            polygonOffset: {},
            scissorTest: {
              rectangle: {}
            },
            depthRange: {},
            depthTest: {
              enabled: true
            },
            colorMask: {},
            depthMask: false,
            blending: {
              enabled: true,
              color: {},
              equationRgb: 32774,
              equationAlpha: 32774,
              functionSourceRgb: 770,
              functionDestinationRgb: 771,
              functionDestinationAlpha: 771
            },
            stencilTest: {
              frontOperation: {},
              backOperation: {}
            },
            sampleCoverage: {}
          },
          color: [0.5, 0.8, 1, 2],
          canvasWidth: 512,
          canvasHeight: 512,
          autoRegisterEditing: true
        }
      };
      this._earth.sceneTree.root.children.push(yuan);
    },
    markquancz(options) {
      let quan = {
        czmObject: {
          xbsjType: "CustomPrimitive",
          xbsjGuid: uuidv1(),
          name: "donghua",
          evalString: `
                    p.canvasWidth = 32;
                    p.canvasHeight = 256;
                    Cesium.Resource.createIfNeeded('./assets/city/particles.png').fetchImage().then(function(image) {
                        p.drawCanvas(ctx => {
                            ctx.clearRect(0, 0, 32, 256);
                            ctx.drawImage(image, 0, 0);
                        });
                    });
                `,
          position: options.position,
          scale: [3 * options.scale, 3 * options.scale, 300 * options.scale],
          positions: [
            4,
            0,
            0,
            2.0000000000000004,
            3.4641016151377544,
            0,
            -1.9999999999999991,
            3.464101615137755,
            0,
            -4,
            4.898587196589413e-16,
            0,
            -2.0000000000000018,
            -3.464101615137754,
            0,
            1.9999999999999973,
            -3.464101615137756,
            0,
            4,
            -9.797174393178826e-16,
            0,
            4,
            0,
            1,
            2.0000000000000004,
            3.4641016151377544,
            1,
            -1.9999999999999991,
            3.464101615137755,
            1,
            -4,
            4.898587196589413e-16,
            1,
            -2.0000000000000018,
            -3.464101615137754,
            1,
            1.9999999999999973,
            -3.464101615137756,
            1,
            4,
            -9.797174393178826e-16,
            1
          ],
          sts: [
            0,
            0,
            0.16666666666666666,
            0,
            0.3333333333333333,
            0,
            0.5,
            0,
            0.6666666666666666,
            0,
            0.8333333333333334,
            0,
            1,
            0,
            0,
            1,
            0.16666666666666666,
            1,
            0.3333333333333333,
            1,
            0.5,
            1,
            0.6666666666666666,
            1,
            0.8333333333333334,
            1,
            1,
            1
          ],
          indices: [
            0,
            1,
            7,
            1,
            8,
            7,
            1,
            2,
            8,
            2,
            9,
            8,
            2,
            3,
            9,
            3,
            10,
            9,
            3,
            4,
            10,
            4,
            11,
            10,
            4,
            5,
            11,
            5,
            12,
            11,
            5,
            6,
            12,
            6,
            13,
            12
          ],
          fragmentShaderSource: `
                varying vec3 v_positionEC;
                varying vec3 v_normalEC;
                varying vec2 v_st;
                varying vec4 v_color;
                uniform sampler2D u_image;
                uniform vec4 u_color;
                void main()
                {
                    vec3 positionToEyeEC = -v_positionEC;
                    vec3 normalEC = normalize(v_normalEC);
                    normalEC = faceforward(normalEC, vec3(0.0, 0.0, 1.0), -normalEC);

                    float dt = fract(czm_frameNumber / 90.0);
                    vec2 st = fract(vec2(1.0) + v_st - vec2(dt, dt));
                    vec4 imageColor = texture2D(u_image, st);

                    vec3 diffuse = imageColor.rgb;
                    float alpha = imageColor.a;

                    diffuse *= v_color.rgb;
                    alpha *= v_color.a;

                    diffuse *= u_color.rgb;
                    alpha *= u_color.a;

                    gl_FragColor = vec4(diffuse, alpha * pow(1.0 - v_st.t, 2.0));
                }
                `,
          renderState: {
            cull: {},
            polygonOffset: {},
            scissorTest: {
              rectangle: {}
            },
            depthRange: {},
            depthTest: {
              enabled: true
            },
            colorMask: {},
            depthMask: false,
            blending: {
              enabled: true,
              color: {},
              equationRgb: 32774,
              equationAlpha: 32774,
              functionSourceRgb: 770,
              functionDestinationRgb: 771,
              functionDestinationAlpha: 771
            },
            stencilTest: {
              frontOperation: {},
              backOperation: {}
            },
            sampleCoverage: {}
          },
          color: [0.5, 0.8, 1, 2],
          canvasWidth: 32,
          canvasHeight: 256,
          autoRegisterEditing: true
        }
      };
      this._earth.sceneTree.root.children.push(quan);
    },
    markzhucz(options) {
      let zhu = {
        czmObject: {
          xbsjType: "CustomPrimitive",
          xbsjGuid: uuidv1(),
          name: "zhu",
          position: options.position,
          scale: [
            1.5 * options.scale,
            1.5 * options.scale,
            150 * options.scale
          ],
          positions: [
            2,
            0,
            0,
            1.0000000000000002,
            1.7320508075688772,
            0,
            -0.9999999999999996,
            1.7320508075688774,
            0,
            -2,
            2.4492935982947064e-16,
            0,
            -1.0000000000000009,
            -1.732050807568877,
            0,
            0.9999999999999987,
            -1.732050807568878,
            0,
            2,
            -4.898587196589413e-16,
            0,
            0.3,
            0,
            1,
            0.15000000000000002,
            0.25980762113533157,
            1,
            -0.14999999999999994,
            0.2598076211353316,
            1,
            -0.3,
            3.6739403974420595e-17,
            1,
            -0.15000000000000013,
            -0.2598076211353315,
            1,
            0.1499999999999998,
            -0.2598076211353317,
            1,
            0.3,
            -7.347880794884119e-17,
            1
          ],
          sts: [
            0,
            0,
            0.16666666666666666,
            0,
            0.3333333333333333,
            0,
            0.5,
            0,
            0.6666666666666666,
            0,
            0.8333333333333334,
            0,
            1,
            0,
            0,
            1,
            0.16666666666666666,
            1,
            0.3333333333333333,
            1,
            0.5,
            1,
            0.6666666666666666,
            1,
            0.8333333333333334,
            1,
            1,
            1
          ],
          indices: [
            0,
            1,
            7,
            1,
            8,
            7,
            1,
            2,
            8,
            2,
            9,
            8,
            2,
            3,
            9,
            3,
            10,
            9,
            3,
            4,
            10,
            4,
            11,
            10,
            4,
            5,
            11,
            5,
            12,
            11,
            5,
            6,
            12,
            6,
            13,
            12
          ],
          fragmentShaderSource: `
                varying vec3 v_positionEC;
                varying vec3 v_normalEC;
                varying vec2 v_st;
                varying vec4 v_color;
                uniform sampler2D u_image;
                uniform vec4 u_color;
                void main()
                {
                    float powerRatio = fract(czm_frameNumber / 30.0) + 1.0;
                    float alpha = pow(1.0 - v_st.t, powerRatio);
                    gl_FragColor = vec4(u_color.rgb, alpha*u_color.a);
                }
                `,
          renderState: {
            cull: {},
            polygonOffset: {},
            scissorTest: {
              rectangle: {}
            },
            depthRange: {},
            depthTest: {
              enabled: true
            },
            colorMask: {},
            depthMask: false,
            blending: {
              enabled: true,
              color: {},
              equationRgb: 32774,
              equationAlpha: 32774,
              functionSourceRgb: 770,
              functionDestinationRgb: 771,
              functionDestinationAlpha: 771
            },
            stencilTest: {
              frontOperation: {},
              backOperation: {}
            },
            sampleCoverage: {}
          },
          color: [0.5, 0.8, 1, 2],
          canvasWidth: 1,
          autoRegisterEditing: true
        }
      };
      this._earth.sceneTree.root.children.push(zhu);
    }
  }
};

export default zz;
